CSS : Exercice sur les Grids et images réactives

Header :

Voici un exercice qui combine les concepts de Grid, de réactivité et d'images réactives sur deux pages différentes. La première page est plus simple et se concentre sur les bases de CSS Grid, tandis que la deuxième page est plus avancée et exploite des fonctionnalités plus avancées de CSS Grid.

Je vais vous répartir en petits groupes pour le résoudre. N'hésitez pas à utiliser GitHub pour travailler en équipe !

Body

Pour le sujet, il va de soit que vous devez continuer à travailler sur votre sujet que vous avez choisi ! Si vous avez choisi la chanson française, vous pouvez créer sur votre première page une sorte de menu de navigation et sur votre deuxième page des tableaux sur les tops des charts des années 78 avec leurs ventes, etc. Ici je vous donne un exercice "minimum" mais saisissez l'occasion pour choisir ce que vous voulez faire, demandez moi si je suis ok, et puis lancez vous ! Enfin, quand vous aurez fini votre travail de groupe sur un sujet, reprenez le fichier pour vous et adaptez le à votre sujet personnel !

Page 1 : Création d'une Mise en Page avec Grid (Niveau Débutant)

Objectif : Créer une mise en page simple à l'aide de CSS Grid.

Instructions :

  1. Créez un fichier HTML vide avec une structure de base, votre template quoi !
  2. Dans le fichier HTML, créez une structure de grille avec 3 colonnes et 2 rangées.
  3. Utilisez CSS Grid pour positionner les éléments suivants dans la grille :
    • Un en-tête avec le texte "Header" dans la première rangée.
    • Une zone de contenu principale avec le texte "Main Content" dans la deuxième rangée.
    • Un pied de page avec le texte "Footer" dans la dernière rangée.
  4. Ajoutez un peu d'espacement entre les éléments et centrez-les horizontalement et verticalement dans leurs cellules respectives.
  5. Assurez-vous que la mise en page est réactive en ajustant le nombre de colonnes en fonction de la taille de l'écran. Par exemple, passez à une seule colonne lorsque l'écran est étroit.

Page 2 : Création d'une Mise en Page Avancée avec Grid (Niveau Avancé)

Objectif : Créer une mise en page avancée à l'aide de CSS Grid, y compris des grilles imbriquées et des zones nommées.

Instructions :

  1. Créez une nouvelle page HTML vide.
  2. Définissez une grille principale avec au moins 4 colonnes et 3 rangées. Utilisez des grilles imbriquées pour créer des sous-grilles dans certaines cellules de la grille principale.
  3. Utilisez des zones nommées pour organiser votre mise en page. Par exemple, définissez des zones nommées pour un en-tête, un menu de navigation, une section de contenu principale et un pied de page.
  4. Placez des éléments (texte, images, etc.) dans les différentes zones de la grille en utilisant des classes CSS appropriées.
  5. Assurez-vous que la mise en page est réactive en ajustant la structure de la grille et des zones nommées en fonction de la taille de l'écran. Par exemple, réorganisez les zones nommées pour une meilleure expérience mobile.
  6. Intégrez une image réactive dans la page en utilisant la balise <img> avec des sources multiples pour différentes tailles d'écran. Assurez-vous que l'image s'adapte correctement à la grille, quelle que soit la taille de l'écran.
Tags

créé le 2023-09-01 à 11:21

Interactive Graph
Table Of Contents
CSS : Exercice sur les Grids et images réactives
Header :
Body
Page 1 : Création d'une Mise en Page avec Grid (Niveau Débutant)
Instructions :
Page 2 : Création d'une Mise en Page Avancée avec Grid (Niveau Avancé)
Instructions :
Footer
Tags